import { fabric } from 'fabric';
import { useEffect, useRef } from 'react';
function SetViewportTransformDebugger() {
  const CanvasViewRef = useRef(null);

  useEffect(() => {
    if (!CanvasViewRef.current) return;

    // 初始化画布
    let canvas = new fabric.Canvas(CanvasViewRef.current, {
      width: 400,
      height: 400,
    });
    // 添加一个矩形到画布上
    let rect = new fabric.Rect({
      top: 10,
      left: 10,
      width: 100,
      height: 100,
      fill: 'red',
    });
    canvas.add(rect);
    // 设置视窗变换矩阵
    let vpt = [2, 0, 0, 2, 50, 50]; // 放大2倍，并平移(50, 50)
    canvas.setViewportTransform(vpt);
    // 渲染画布以显示变换效果
    // canvas.renderAll();
    return () => {
      canvas.remove(rect);
      canvas.dispose();
    };
  }, []);

  return (
    <div>
      <h3>
        setViewportTransform
        用于设置画布（Canvas）的视窗变换矩阵。这个变换矩阵可以控制画布内容的平移，旋转，缩放
      </h3>
      <p>setViewportTransform 方法接收一个数组作为参数，这个数组包含6个元素</p>
      <p>[4]: 水平移动（x 轴方向） [5]: 垂直移动（y 轴方向）</p>
      <p>[1]: 水平选择（x 轴方向）[2]: 垂直旋转（y 轴方向）</p>
      <p>[0]: 水平缩放（x 轴方向）[3]: 垂直缩放（y 轴方向）</p>
      <p></p>
      <canvas style={{ border: 'red solid 1px' }} ref={CanvasViewRef}></canvas>
    </div>
  );
}

export default SetViewportTransformDebugger;
